<template>
    <div class="navbar">
        <nav-bar>
            <template v-slot:left>
                <div class="navbar-left" @click="backIndex">
                    <div class="navbar-left-img">
                        <img src="~assets/img/common/fanhui.svg">
                    </div>
                    <p>返回</p>
                </div>
            </template>
            <template v-slot:center>
                <div class="navbar-center">
                    <p class="navbar-center-p">关闭</p>
                    <p class="navbar-center-title">{{title}}</p>
                </div>
            </template>
            <template v-slot:right>
                <div class="navbar-right-img">
                    <img src="~assets/img/common/shenlue1.svg"/>
                </div>
            </template>
        </nav-bar>
    </div>
</template>

<script>
    import NavBar from "@/components/common/navbar/NavBar";
    export default {
        name: "DetailNavbar",
        props:{
            title:String
        },
        components: {NavBar},
        methods:{
            backIndex(){
                this.$router.back()
            }
        }
    }
</script>

<style scoped>
    .navbar{
        background-color: black;
        color: white;
    }
    .navbar-center-p{
        margin-left: 15px;
        font-size: 13px;
        white-space: nowrap;  /* 不允许换行 */
    }
    .navbar-left {
        display: flex;
        white-space: nowrap;  /* 不允许换行 */
    }
    .navbar-center{
        display: flex;
        width: 200px;
    }
    .navbar-center-title{
        font-weight: 600;
        margin-left: 25px;
        white-space: nowrap;  /* 不允许换行 */
        overflow: hidden;  /* 隐藏 */
        text-overflow:ellipsis;
    }
    .navbar-left-img {
        width: 20px;
        height: 23px;
        margin-left: 10px;
        margin-right: 5px;
    }
    .navbar-left-img img {
        width: 100%;
    }

    .navbar-right-img{
        width: 20px;
        height: 23px;
        margin-left: 5px;
    }
    .navbar-right-img img{
        width: 100%;
        margin-left: 10px;
    }

</style>